import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';
import type { CSSProperties } from 'react';
import type { Argument } from 'classnames';
import type { ReactNode } from 'react';
import './index.less';

const TjContent: React.FC<ITjContentProps> = (props) => {
  return (
    <div style={props.style} className={classNames('tj-content', props.className)}>
      <div
        className={classNames('mains', {
          'not-padding-top': props.notPaddingTop,
        })}
      >
        {(props.titleLeft || props.titleRight) && (
          <div className="title">
            {_.isString(props.titleLeft) ? (
              <div className="default-title-style">{props.titleLeft}</div>
            ) : (
              props.titleLeft
            )}
            <div>{props.titleRight}</div>
          </div>
        )}
        <div className="children-box">{props.children}</div>
      </div>
    </div>
  );
};

interface ITjContentProps {
  /**
   * 支持传入行内样式
   */
  style?: CSSProperties;
  /**
   * class
   * 不管传没传，都会有一个 `tj-content` 的 className
   */
  className?: Argument;
  /**
   * 内容
   */
  children?: ReactNode;
  /**
   * 标题左侧
   */
  titleLeft?: ReactNode;
  /**
   * 标题右侧
   */
  titleRight?: ReactNode;
  /**
   * 不使用顶部内边距
   */
  notPaddingTop?: boolean;
}

export { TjContent };
